<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>客服工作台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body data-user-role="customer_service">
<!-- 引入增强版全局通知组件 -->
<div th:replace="~{common/enhanced-global-notification :: notification}"></div>

<!-- 使用专门的客服导航栏 -->
<div th:replace="~{common/customer-service-navbar :: navbar}"></div>

<div class="container mt-4">
    <div class="row">
        <div class="col-12">
            <h1 class="mb-4">
                <i class="bi bi-headset text-info"></i> 客服工作台
                <small class="text-muted">- 专业服务，贴心支持</small>
            </h1>
        </div>
    </div>

    <!-- 欢迎信息 -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="alert alert-info">
                <h5 class="alert-heading">欢迎，<span th:text="${username}">客服</span>！</h5>
                <p class="mb-0">这里是您的客服工作台，您可以与顾客进行对话，解答他们的问题。</p>
            </div>
        </div>
    </div>

    <!-- 对话统计 -->
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card border-info">
                <div class="card-body text-center">
                    <i class="bi bi-chat-dots fs-1 text-info mb-2"></i>
                    <h3 th:text="${totalConversations}">0</h3>
                    <p class="card-text">活跃对话数</p>
                    <a href="/customer-service/conversations" class="btn btn-outline-info btn-sm">
                        <i class="bi bi-arrow-right"></i> 查看全部
                    </a>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card border-primary">
                <div class="card-body text-center">
                    <i class="bi bi-person-check fs-1 text-primary mb-2"></i>
                    <h3>在线</h3>
                    <p class="card-text">客服状态</p>
                    <span class="badge bg-success">服务中</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 最近对话 -->
    <div class="row">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-chat-left"></i> 最近对话</h5>
                </div>
                <div class="card-body">
                    <div th:if="${#lists.isEmpty(customerList)}" class="text-center text-muted py-4">
                        <i class="bi bi-chat-dots fs-1"></i>
                        <p class="mt-2">暂无对话记录</p>
                        <p class="small">当顾客发起咨询时，对话记录将在这里显示</p>
                    </div>
                    
                    <div th:if="${!#lists.isEmpty(customerList)}">
                        <div th:each="conversation : ${customerList}" class="d-flex align-items-center mb-3 p-3 border rounded">
                            <div class="flex-shrink-0">
                                <i class="bi bi-person-circle fs-2 text-primary"></i>
                            </div>
                            <div class="flex-grow-1 ms-3">
                                <h6 class="mb-1" th:text="${conversation.customerName}">顾客姓名</h6>
                                <p class="mb-1 text-muted small" th:text="${conversation.lastMessage}">最新消息内容...</p>
                                <div class="d-flex justify-content-between align-items-center">
                                    <small class="text-muted" th:text="${conversation.lastMessageTime}">时间</small>
                                    <span class="badge bg-success">进行中</span>
                                </div>
                            </div>
                            <div class="flex-shrink-0">
                                <a th:href="@{/customer-service/chat/{conversationId}(conversationId=${conversation.conversationId})}" 
                                   class="btn btn-outline-primary btn-sm">
                                    <i class="bi bi-chat-left-text"></i> 进入对话
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="text-center mt-3" th:if="${!#lists.isEmpty(customerList)}">
                        <a href="/customer-service/conversations" class="btn btn-primary">
                            <i class="bi bi-chat-dots"></i> 查看所有对话
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="bi bi-info-circle"></i> 客服指南</h5>
                </div>
                <div class="card-body">
                    <h6 class="text-primary">服务流程</h6>
                    <ul class="list-unstyled">
                        <li><i class="bi bi-check-circle text-success"></i> 等待顾客发起咨询</li>
                        <li><i class="bi bi-check-circle text-success"></i> 查看对话记录</li>
                        <li><i class="bi bi-check-circle text-success"></i> 及时回复顾客</li>
                        <li><i class="bi bi-check-circle text-success"></i> 提供专业解答</li>
                        <li><i class="bi bi-check-circle text-success"></i> 跟进问题解决</li>
                    </ul>
                    
                    <hr>
                    
                    <h6 class="text-info">快速操作</h6>
                    <div class="d-grid gap-2">
                        <a href="/customer-service/conversations" class="btn btn-outline-info btn-sm">
                            <i class="bi bi-chat-dots"></i> 对话管理
                        </a>
                    </div>
                    
                    <hr>
                    
                    <h6 class="text-warning">系统说明</h6>
                    <ul class="list-unstyled small">
                        <li><i class="bi bi-info-circle text-warning"></i> 顾客开始新对话时，旧对话将被自动关闭</li>
                        <li><i class="bi bi-info-circle text-warning"></i> 系统会智能分配客服，平衡工作负载</li>
                        <li><i class="bi bi-info-circle text-warning"></i> 对话记录在数据库重启前持续保存</li>
                    </ul>
                    
                    <div class="text-center">
                        <small class="text-muted">客服工作台 v2.0</small>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script th:inline="javascript">
    let currentConversationCount = /*[[${totalConversations}]]*/ 0;
    let pollInterval;
    
    document.addEventListener('DOMContentLoaded', function() {
        // 开始轮询检查新对话
        startPolling();
        
        // 页面离开时停止轮询
        window.addEventListener('beforeunload', function() {
            stopPolling();
        });
    });
    
    function startPolling() {
        pollInterval = setInterval(function() {
            checkForNewConversations();
        }, 5000); // 每5秒检查一次
    }
    
    function stopPolling() {
        if (pollInterval) {
            clearInterval(pollInterval);
        }
    }
    
    function checkForNewConversations() {
        fetch('/customer-service/api/conversations-count')
            .then(response => response.json())
            .then(data => {
                if (data.success && data.count !== currentConversationCount) {
                    // 对话数量发生变化，显示通知并刷新页面
                    if (data.count > currentConversationCount) {
                        showNewConversationNotification();
                    } else if (data.count < currentConversationCount) {
                        showConversationEndedNotification();
                    }
                    
                    // 延迟刷新页面以显示最新对话列表
                    setTimeout(() => {
                        location.reload();
                    }, 2000);
                    
                    currentConversationCount = data.count;
                }
            })
            .catch(error => {
                console.error('检查新对话失败:', error);
            });
    }
    
    function updateConversationCount(newCount) {
        // 更新对话统计数字
        const countElement = document.querySelector('.card-body h3');
        if (countElement) {
            countElement.textContent = newCount;
        }
    }
    
    function showNewConversationNotification() {
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = 'alert alert-success alert-dismissible fade show position-fixed';
        notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        notification.innerHTML = `
            <i class="bi bi-chat-dots"></i>
            <strong>新对话通知</strong>
            <p class="mb-0">有新的顾客发起了咨询，页面即将刷新...</p>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        document.body.appendChild(notification);
        
        // 3秒后自动移除通知
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 3000);
    }
    
    function showConversationEndedNotification() {
        // 创建通知元素
        const notification = document.createElement('div');
        notification.className = 'alert alert-warning alert-dismissible fade show position-fixed';
        notification.style.cssText = 'top: 20px; right: 20px; z-index: 9999; min-width: 300px;';
        notification.innerHTML = `
            <i class="bi bi-exclamation-triangle"></i>
            <strong>对话结束通知</strong>
            <p class="mb-0">有顾客结束了对话，页面即将刷新...</p>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        `;
        
        document.body.appendChild(notification);
        
        // 3秒后自动移除通知
        setTimeout(() => {
            if (notification.parentNode) {
                notification.parentNode.removeChild(notification);
            }
        }, 3000);
    }
</script>
</body>
</html>
